import React, {Component,}from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
import 'intersection-observer'
// components
import ConsumePopup from "../chat-room/ConsumePopup/ConsumePopup"
import GiftPopup from "../chat-room/GiftPopup/GiftPopup"
import ChatRoomFooter from "../chat-room/ChatRoomFooter/ChatRoomFooter"
import GiftNotice from "../chat-room/GiftNotice/GiftNotice"
import DialogueContainer from "../chat-room/Dialogue/Dialogue"
import Votes from "./votes/votes";
import './together.css'
// constants
import constants, {GiftMapper} from "../../../../../utils/constants"
import {log,} from "../../../../../utils/commonfunc"
import {Modal, Toast} from "antd-mobile";
import LocalStorageService from "../../../../../utils/LocalStorageService";
import {
    getChatTokenReq,
    getFuliResultReq, getGameLoginInfo, getIsNewTogetherUserReq, getVisitorChatTokenReq, getVisitorVoteDataReq,
    getVoteDataReq,
    sendChatMsgReq,
    votTeamReq
} from "../../../../../apis/goApis";
import TeamAvatar from "../../Header/Versus/TeamAvatar/TeamAvatar";
import CustomBotton from "../../../../../shared-components/CustomButton/CustomBotton";
import VotedNotice from "./voted-notice/voted-notice";
import GamePopup from "./game-popup/game-popup";
import { Downloader, Parser, Player } from 'svga.lite'
import fuliSrc from "../../../../../res/images/web/together/惊喜福利@2x.png"
import fuliFixedSrc from "../../../../../res/images/web/together/福利浮窗@2x.png"
import defaultAvartarSrc from "../../../../../res/images/web/together/我的碎片@2x.png";
import FuliResultItem from "./fuli-result-item/fuli-result-item";
import boxSrc from "../../../../../res/images/web/together/拆盲盒@2x.png";
import fulifafangSrc from "../../../../../res/images/web/together/福利发放@2x.png"
import withDownload from "../../../../../high-order-component/withDownload/withDownload";
import TogetherGiftPopup from "../chat-room/GiftPopup/together-gift-popup";
import 用户未设置头像 from '../../../../../res/images/web/together/无设置头像@2x.png'
import NewUserGuide from "./new-user-guide/new-user-guide";

class Together extends Component {

    constructor(props) {
        super(props)
        this.uid = localStorage.getItem('userid')
        this.login = LocalStorageService.get('isLogin')
        this.matchId = this.props.match.params.gameId
        this.downloader = new Downloader()
        this.parser = new Parser()
        this.timerId = null
        this.state = {
            msg: '',
            inputTouched: false,
            popUp: {
                consume: false,
                gift: false,
                vote: false,
                game: false,
                fuli: false,
                fuliResult: false,
            },
            voted: false,
            inputDisabled: true,
            voteDetail: null,
            voteResult: null,
            votedNotice: false,
            audience: [],
            fuli: [],
            fuliResult: [],
            fuliLight: -1,
            fakeHeat: [0, 0,],
            seatFolded: true,
            svga: {
                home: false,
                away: false,
                large: false,
            },
            gifts: {
                home: [],
                away: [],
                large: [],
            },
            playIndex: {
                home: [],
                away: [],
                large: [],
            },
            isNewUser: false,
        }
    }

    componentDidMount() {
        if (this.uid) {
            this.checkNewUser()
                .then(isNew => {
                    if (isNew === false) {
                        this.checkVote()
                    }
                })
                .then(() => this.timerId = setInterval(() => this.checkVote(false), 10000))
        } else {
            this.checkVote().then(() => this.timerId = setInterval(() => this.checkVote(false), 10000))
        }

        this.setUpSvgaPlayers()
        this.connect()
        this.checkInput()

    }

    checkNewUser() {
        return getIsNewTogetherUserReq({
            do: 0,
            uid: this.uid,
        }).then(res => {
            const isNewUser = res.data.ok === 0
            this.setState({
                isNewUser,
            })
            return isNewUser
        })

    }

    endGuide = () => {
        getIsNewTogetherUserReq({
            do: 1,
            uid: this.uid,
        })
            .then(res => {
                if (res.data.ok) {
                this.setState({
                    isNewUser: false,
                })}
            })
            .then(() => this.checkVote())
    }

    checkFuliResult() {

        getFuliResultReq({
            Namiid: parseInt(this.matchId),
            Offset: 0,
            Limit: 5,
        }).then(res => {
            let r = res.data.ok
            this.setState({
                fuliResult: r,
            }, () => {
                if (r.length > 0) {
                    this.onPopUp('fuliResult')
                }
            })
        })
    }

    setUpSvgaPlayers() {
        this.setUpSvgaPlayer('home')
        this.setUpSvgaPlayer('away')
        this.setUpSvgaPlayer('large')
    }

    setUpSvgaPlayer(type) {
        let key = `${type}Player`
        try {
            this[key] = new Player('#id-svga-' + type)
            this[key].set({loop: 1,})
            this[key].$on('end', () => {
                let index = this.state.playIndex[type]
                let remainSvgaToPlay = index + 1 < this.state.gifts[type].length
                if (remainSvgaToPlay) {
                    this.setState({
                        playIndex: {
                            ...this.state.playIndex,
                            [type]: index + 1
                        },
                    }, () => this.playSvga(type))
                } else {
                    this.setState({
                        svga: {
                            ...this.state.svga,
                            [type]: false,
                        },
                    })
                }
            })
        } catch (e) {

            log(e)

        }

    }

    playSvga(key) {

        let index = this.state.playIndex[key]
        let gift = this.state.gifts[key][index]
        let downloader = this.downloader
        let parser = this.parser
        let playerName = `${key}Player`
        let player = this[playerName]

        const id = gift.giftId
        const svgaFile = GiftMapper[`gift_${id}`].svga
        if (svgaFile) {
            this.setState(({
                svga: {
                    ...this.state.svga,
                    [key]: true,
                },
            }), () => {
                downloader
                    .get(svgaFile)
                    .then(file => parser.do(file))
                    .then(svga => player.mount(svga))
                    .then(() => player.start())
                    .then(() => this.checkVote(false))
            })
        }

    }

    checkGiftsPlay(key, gifts, prevGift,) {
        if (gifts.length > prevGift.length) {
            let newGifts = gifts.slice(prevGift.length)
            let isPlaying = this.state.svga[key]
            if (isPlaying) {
                this.setState({
                    gifts: {
                        ...this.state.gifts,
                        [key]: [
                            ...this.state.gifts[key],
                            ...newGifts,
                        ]
                    }
                })
            } else {
                this.setState({
                    gifts: {
                        ...this.state.gifts,
                        [key]: [
                            ...this.state.gifts[key],
                            ...newGifts,
                        ]
                    },
                    playIndex: {
                        ...this.state.playIndex,
                        [key]: prevGift.length,
                    },
                }, () => this.playSvga(key))
            }
        }
    }
    componentDidUpdate(prevProps, prevState, snapshot) {

        if (prevProps.holdon === true && prevProps.connectWsOk === false && this.props.connectWsOk === true) {
            this.connect()
        }

        const prevGift = prevProps.gifts

        const prevHomeGifts = prevGift.filter(g => g.Who === 'zhu').filter(g => g.Id >= 302 && g.Id <= 305)
        const prevAwayGifts = prevGift.filter(g => g.Who === 'ke').filter(g => g.Id >= 302 && g.Id <= 305)
        const prevLargeGifts = prevGift.filter(g => g.Id > 305)
        const gifts = [...this.props.gifts,]

        if (gifts.length > prevGift.length) {
            const homeGifts = gifts.filter(g => g.Who === 'zhu').filter(g => g.Id >= 302 && g.Id <= 305)
            const awayGifts = gifts.filter(g => g.Who === 'ke').filter(g => g.Id >= 302 && g.Id <= 305)
            const largeGifts = gifts.filter(g => g.Id > 305)
            this.checkGiftsPlay('home', homeGifts, prevHomeGifts)
            this.checkGiftsPlay('away', awayGifts, prevAwayGifts)
            this.checkGiftsPlay('large', largeGifts, prevLargeGifts)
        }

    }

    checkInput() {
        const status = this.props.currentGame.info.statusid
        if (this.login && (status > 1 && status < 9)) {
            this.setState({
                inputDisabled: false,
            })
        }
    }

    setVoted = () => {
        this.setState({voted: true, votedNotice: true,}, () => this.checkVote())
    }

    checkVote(modal = true) {
        if (this.login) {
            return getVoteDataReq({
                Namiid: parseInt(this.matchId),
                Uid: this.uid,
            }).then((resp) => {
                const voted = resp.data.usersupport.Who.length > 0
                const status = this.props.currentGame.info.statusid
                const voteDetail = resp.data.usersupport
                const audience = []
                resp.data.stand.map(user => {
                    if (user.Iconurl === '') {
                        user.Iconurl = 用户未设置头像
                    }
                    audience.push(user)
                })

                const fuli = resp.data.fuli
                const fuliLight = resp.data.fulilight
                const fakeHeat = resp.data.support.Fakeheat

                if (voted || status === 8) {
                    const result = resp.data.support
                    this.setState({
                        voted,
                        voteDetail,
                        voteResult: result,
                        audience,
                        fuli,
                        fuliLight,
                        fakeHeat,
                    })
                    if (voted) {
                        this.checkFuliResult()
                    }
                } else {
                    const status = this.props.currentGame.info.statusid
                    const gameOn = status > 1 && status < 8
                    this.setState({
                        voted,
                        voteDetail,
                        audience,
                        fuli,
                        fuliLight,
                        fakeHeat,
                    }, () => {
                        if (gameOn && modal) {
                            this.onPopUp('vote')
                        }
                    })
                }

            })
        } else {
            return getVisitorVoteDataReq({
                Namiid: parseInt(this.matchId),
            }).then((resp) => {
                const voteDetail = resp.data.support
                // const fuli = resp.data.fuli
                // const fuliLight = resp.data.fulilight
                const fakeHeat = resp.data.support.Fakeheat
                this.setState({
                    voteDetail,
                    // fuli,
                    // fuliLight,
                    fakeHeat,
                })
            })
        }
    }

    connect() {
        if (this.props.holdon) {
            return
        } else {
            const status = this.props.currentGame.info.statusid
            let gameOn = status > 1 && status < 8
            if (gameOn) {
                this.getToken()
                    .then((res) => {
                        const ws = new WebSocket(constants.wsUrl2)
                        const hid = 'login'
                        // const quns = [matchId]
                        const quns = []
                        const frds = []
                        let act, token
                        if (this.uid) {
                            const t = res?.data?.ok
                            if (t) {
                                token = t
                                act = this.uid
                            }
                        } else {
                            token = res?.data?.ok?.tk
                            act = res?.data?.ok?.act
                        }
                        const data = {
                            token,
                            act,
                            quns,
                            frds,
                            hid,
                        }
                        this.props.onConnectWs({ws, msg: data,})
                    })
            }
        }

    }

    // 挂载组件的时候清除 ws 实例
    componentWillUnmount() {
        this.props.onChatWsClose()
        this.timerId && clearInterval(this.timerId)
    }

    getToken = async () => {
        const uid = this.uid
        const login = this.login
        if (login) {
            return await getChatTokenReq({uid,})
        } else {
            return await getVisitorChatTokenReq()
        }
    }

    onInputFocus = () => {
        this.setState({
            inputTouched: true,
        })
    }

    onInputBlur = () => {
        this.setState({
            inputTouched: false,
        })
    }


    connectWs = (token, type) => {

        const o = {
            live: `${constants.wsUrl}/ww`,
            game: `${constants.wsGameUrl}/ww`
        }
        const wsUrl = o[type]
        const ws = new WebSocket(wsUrl)

        const uid = localStorage.getItem('userid')
        // const anchorName = '平台'

        // Id(pin):"ded65287-b39b-4f04-977c-7caf75e7478d"
        // Username(pin):"18859900505"
        // Pwd(pin):""
        // Viplevel(pin):14
        // Gold(pin):9238
        // Gender(pin):0
        // Iconurl(pin):"http://123.207.85.242/try/go/avatar/ded65287-b39b-4f04-977c-7caf75e7478d.jpg#0.7938720239309662"
        // Nickname(pin):"59900505"
        // Mobile(pin):"18859900505"
        // Wxid(pin):""
        // Tokenuuid(pin):"GiQy54RcLSiuL9CHUlIuQNS8VCNLhOdY"
        // Realname(pin):""
        // Idnumber(pin):""
        // Email(pin):""
        // Exp(pin):10403
        // Packet(pin):"[[2,100],[3,10],[6,105],[10001,3],[20001,1],[8,160],[7,100],[5,4],[4,4]]"
        // Vip(pin):2
        // Vipst(pin):1584500547
        // IsStar(pin):false
        // IsShowing(pin):false
        // initFlag(pin):1
        const msg = {
            c: 3,
            token,
            // game,
            // viplevel,
            // nickname,
            uid,
            // anchorName,
            // vip,
        }
        this.props.onConnectWs({ws, msg,})
    }
    // events
    // 礼物 充值 弹窗
    onPopUp = (key) => {
        // const uid = localStorage.getItem('userid')
        // const err = this.props.chat.err
        const game = this.props.currentGame
        const status = game.info.statusid
        let gameNotStated = status === 1
        if (LocalStorageService.get('isLogin') === null) {
            // Toast.info('请登录', 0.5)
            Modal.alert('亲爱的用户，您还未登录哦', '', [
                { text: <span>取消</span>, onPress: () => {} },
                {
                    text: <span style={{color: 'rgba(255, 165, 0, 1)',}}>去登陆</span>,
                    onPress: () => this.props.history.push('../login'),
                },
            ])
            return
        }
        if (key === 'gift') {
            if (gameNotStated) {
                Toast.info('比赛未开始', 0.5)
                return
            }
        }
        this.setState({
            popUp: {
                [key]: true,
            },
        })

        // this.props.fetchUserDetail({uid,})
        //     .then(() => {
        //
        // })

    }

    onClose = key => {
        // const err = this.props.chat.err
        this.setState({
            popUp: {
                [key]: false,
            },
        })
        // const uid = localStorage.getItem('userid')
        // this.props.fetchUserDetail({uid,})
    }

    // 聊天输入条
    onChatInputChange = e => {
        const v = e.target.value
        this.setState({msg: v,})
    }

    // 发送聊天内容
    onChatInputSubmit = e => {
        e.preventDefault()
        if (this.state.msg.length === 0) {
            return
        }
        this.sendMsg(this.state.msg)
        this.setState({msg: '',})
        e.target.blur()
    }

    // 打赏动画监听
    onAnimationEnd = (index, e) => {

        let arr = this.props.gifts
        arr[index].showed = true
        // this.setState({
        //     gifts: arr,
        // })


    }

    // actions
    // 接受 WebSocket 消息
    alertWsErr = msg => {
        log(msg)
    }

    addWsMsg = msg => {
        const {c,} = msg
        const cToAction = {
            1: this.addDialogue,
            2: this.addGift,
            3: this.addWelcome,
            4: this.addLeave,
        }
        cToAction[c](msg)
    }

    addDialogue = msg => {
        this.setState({dialogues: [...this.state.dialogues, msg],})
    }

    addGift = msg => {
        const gift = msg
        gift.showed = false
        const gs = this.state.gifts
        gs.push(gift)
        this.setState({gifts: gs,})
    }

    addWelcome = msg => {
        this.setState({dialogues: [...this.state.dialogues, msg,],})
        this.setState({users: [...this.state.users, msg,]})
    }

    addLeave = msg => {
        const users = this.state.users
        const i = users.findIndex(user => user.id === msg.id)
        users.splice(i, 1)
        this.setState({users: users,})
    }

    checkFirstMsg = () => {
        const storage = LocalStorageService
        const key = 'first-chat'
        const first = storage.get(key)
        const now = new Date()
        if (first === null) {
            storage.save(key, now)
            this.props.doGetChatExp()
        } else {
            const parsed = Date.parse(first)
            const diff = now - parsed
            const day = 86400000
            if (diff > day) {
                storage.save(key, now)
                this.props.doGetChatExp()
            }
        }
    }

    // 客户端发送消息
    // 发送聊天消息
    sendMsg = msg => {

        const m = {
            c: 1,
            msg,
            viplevel: this.props.userDetail.Viplevel,
            nickname: this.props.userDetail.Nickname,
            uid: this.props.userDetail.Id,
            vip: this.props.userDetail.Vip,
        }

        // const data = JSON.stringify(m)
        const propid = 0
        const to = this.matchId
        const propnum = 0
        const game = this.props.currentGame.matchevent.name_zh
        const usepacket = 0
        sendChatMsgReq({
            uid: this.uid,
            to,
            propid,
            propnum,
            game,
            usepacket,
            data: JSON.stringify(m),
            Flag: this.props.chatFlag,
        })

    }
    // 确认发送礼物
    sendGift = (gift) => {

        gift.c = 2
        // gift.uid = this.state.uid
        // gift.giver = this.props.userDetail.Nickname
        const game = this.props.currentGame.matchevent.name_zh
        gift.viplevel = this.props.userDetail.Viplevel
        gift.nickname = this.props.userDetail.Nickname
        gift.uid = this.props.userDetail.Id
        gift.vip = this.props.userDetail.Vip
        gift.game = game
        gift.anchorName = '平台'
        gift.giftId = gift.Id
        // gift.Who = this.state.voteDetail.Who
        gift.name = gift.Name

        // const data = JSON.stringify(m)

        // UsePack: false
        // anchorName: "平台"
        // c: 2
        // game: "哥斯达黎加甲组联赛"

        // giftId: 8
        // giftnum: 1
        // name: "赞"
        // nickname: "Allen"
        // price: 1
        // selected: false
        // uid: "3b9ebae0-9049-4e65-959f-afb59f1a1ec4"
        // vip: 11
        // viplevel: 5
        const propid = gift.Id
        const to = this.matchId
        const propnum = gift.giftnum
        const usepacket = gift.UsePack ? 1 : 0

        return sendChatMsgReq({
            uid: this.uid,
            to,
            propid,
            propnum,
            game,
            usepacket,
            Who: gift.Who,
            data: JSON.stringify(gift),
            nosave: 1,
        }).then((data) => {
            if (data.data.err) {
                Toast.info(constants.ErrorCode[data.data.err])
            }
        })

        // const d = JSON.stringify(gift)
        // this.props.chatWs.send(d)



    }

    checkWsErr = () => {
        const e = this.props.chat.err
        if (e > 0) {
            Toast.info(constants.WsErrorCode[e])
        }
        this.props.doEmptyWsErr()
    }

    voteTeam = (team, isHome) => {
        if (this.login) {
            const params = {
                Uid: this.uid,
                Namiid: parseInt(this.matchId),
                Teamname: team.name_zh,
                Who: isHome ? 'zhu' : 'ke',
            }
            return votTeamReq(params)
                .then(resp => {
                    if (resp.data.ok) {
                        Toast.info('支持成功')
                        // this.props.setVoted()
                        this.setVoted()
                        return true
                    } else {
                        return false
                    }
                })
        } else {
            this.props.history.push('../login')
        }
    }

    goToFuliDetail = () => {
        const id = this.matchId
        this.props.history.push('../fuli/' + this.matchId)
    }

    callGame = (name) => {
        if (this.login) {
            getGameLoginInfo({
                Uid: this.uid,
                Gametype: name,
            })
                .then(res => {
                    if (res.data.ok) {
                        const gameUrl = res.data.ok.gameUrl
                        window.location = gameUrl
                    }
                })
        } else {
            Toast.fail('请登陆')
        }
    }

    render() {

        const {
            giftNotice,
            userDetail,
        } = this.props

        const giftNoticesTemplate = this.props.gifts.map((gift, index) => {
            if (gift.showed) {
                return null
            } else {
                return <GiftNotice
                    gift={gift}
                    key={index}
                    // iconIndex={index}
                    onAnimationEnd={(e) => this.onAnimationEnd(index, e)}
                />
            }
        })

        const game = this.props.currentGame
        const status = game.info.statusid
        const schedule = status === 1
        let gameOn = status > 1 && status < 8
        let gameNotStated = status === 1
        let gameEnd = status === 8
        let resultText, resultColor, resultBgColor
        let s1 = game.home_team.score
        let s2 = game.away_team.score
        if (s1 === s2) {
            resultText = '平手'
            resultColor = '#FFA500'
            resultBgColor = '#FFF9ED'
        } else if (s1 < s2) {
            resultText = '客胜'
            resultColor = '#2D48C8'
            resultBgColor = '#F5F7FF'
        } else {
            resultText = '主胜'
            resultColor = '#CA3A39'
            resultBgColor = '#FFF7F7'
        }
        const svgaHome = <canvas
            id='id-svga-home'
            style={{zIndex: 1000, position: 'absolute', top: '0', left: 0, width: '100px', height: '100px', display: this.state.svga.home ? 'block' : 'none',}}
        />
        const svgaAway = <canvas
            id='id-svga-away'
            style={{zIndex: 1000, position: 'absolute', top: '0', right: 0, width: '100px', height: '100px', display: this.state.svga.away ? 'block' : 'none',}}
        />

        const svgaLarge = <canvas
            id='id-svga-large'
            style={{zIndex: 1000, position: 'fixed', top: '0', right: 0, width: '100%', height: '100%', display: this.state.svga.large ? 'block' : 'none',}}
        />

        const fuliResultModal = <Modal
            visible={this.state.popUp.fuliResult}
            transparent
            maskClosable={true}
            onClose={() => this.onClose('fuliResult')}
            style={{padding: 0, width: '90%',}}
            className='fuli-result-modal'
        >
            <p
                style={{
                    width: '100%',
                    background: resultColor,
                    color: '#fff',
                    borderRadius: '8px 8px 0 0',
                    // padding: '16px',
                    padding: '16px 0'
                }}
            >
                {resultText}
            </p>
            <div>
                {this.state.fuliResult.map((user, index) => <FuliResultItem user={user} key={index} style={{background: resultBgColor,}}/>)}
            </div>
            <p
                style={{
                    width: '100%',
                    background: '#fff',
                    color: '#333',
                    borderRadius: '0 0 8px 8px',
                    // padding: '16px',
                    padding: '16px 0'
                }}
                onClick={() => this.props.history.push('../fuli-result/' + this.matchId)}
            >
                查看全部列表
            </p>
        </Modal>

        const fuliModal = <Modal
            visible={this.state.popUp.fuli}
            transparent
            maskClosable={true}
            onClose={() => this.onClose('fuli')}
        >
            <p style={{fontSize: '16px', color: '#333', lineHeight: '22px',}}>
                惊喜福利
            </p>
            <p className='mg-b-12px'>
                支持球队，增加热度
            </p>
            <img src={fuliSrc} style={{width: '150px', height: '140px', marginBottom: '16px',}} alt=''/>
            <CustomBotton
                extrastyle={{width: '120px', letterSpacing: '0', margin: '0 auto', background: '#FFA500',}}
                onClick={this.goToFuliDetail}
            >
                去参与
            </CustomBotton>
        </Modal>

        const chooseModal = <Modal
            visible={this.state.popUp.vote}
            transparent
            maskClosable={true}
            onClose={() => this.onClose('vote')}
        >
            <p style={{color: '#333',}} className='mg-b-8px'>选择看台</p>
            <div className='flex-center-align-center mg-b-12px'>
                <div
                    style={{
                        width: '120px',
                        height: '94px',
                        background: '#F9F9F9',
                        borderRadius: '100px 0px 0px 100px',
                        marginRight: '4px',
                    }}
                    className='flex-center-align-center'
                >
                    <div className='flex-center-align-center flex-wrap-container'>
                        <TeamAvatar iconUrl={this.props.currentGame.home_team.logo} style={{width: 44, height: 44,}}/>
                        <p style={{color: '#333', marginTop: '4px', width: '100%',}}>
                            {this.props.currentGame.home_team.name_zh}
                        </p>
                    </div>

                </div>
                <div
                    style={{
                        width: '120px',
                        height: '94px',
                        background: '#F9F9F9',
                        borderRadius: '0px 100px 100px 0px',
                    }}
                    className='flex-center-align-center'
                >
                    <div className='flex-center-align-center flex-wrap-container'>
                        <TeamAvatar iconUrl={this.props.currentGame.away_team.logo} style={{width: 44, height: 44,}}/>
                        <p style={{color: '#333', marginTop: '4px', width: '100%',}}>
                            {this.props.currentGame.away_team.name_zh}
                        </p>
                    </div>
                </div>
            </div>
            <div className='flex-center-align-center'>
                <div style={{width: '120px', marginRight: '4px',}}>
                    <CustomBotton
                        extrastyle={{letterSpacing: 0,}}
                        bg='#C83736'
                        onClick={() => {
                            this.voteTeam(this.props.currentGame.home_team, true)
                                .then(ok => ok && this.onClose('vote'))
                                .then(() => setTimeout(() => this.onPopUp('fuli'), 500))
                        }}
                    >
                        主场球迷看台
                    </CustomBotton>
                </div>
                <div style={{width: '120px',}}>
                    <CustomBotton
                        extrastyle={{letterSpacing: 0,}}
                        bg='#2D48C8'
                        onClick={() => {
                            this.voteTeam(this.props.currentGame.away_team, false)
                                .then(ok => ok && this.onClose('vote'))
                                .then(() => setTimeout(() => this.onPopUp('fuli'), 500))
                        }}
                    >
                        客场球迷看台
                    </CustomBotton>
                </div>
            </div>
        </Modal>

        const fuliIcon = <img
            // style={{
            //     position: 'fixed',
            //     right: '14px',
            //     bottom: '84px',
            //     width: '56px',
            //     height: '56px',
            //     zIndex: 100,
            // }}
            style={{
                position: 'absolute',
                left: window.innerWidth * 2 - 14 - 56,
                bottom: '84px',
                width: '56px',
                height: '56px',
                zIndex: 100,
            }}
            className='wobble-hor-bottom'
            src={fuliFixedSrc}
            alt=""
            onClick={this.goToFuliDetail}
        />

        const fulifafangIcon = <img
            // style={{
            //     position: 'fixed',
            //     right: '14px',
            //     bottom: '84px',
            //     width: '56px',
            //     height: '56px',
            //     zIndex: 100,
            // }}
            className='wobble-hor-bottom'
            style={{
                position: 'absolute',
                left: window.innerWidth * 2 - 14 - 56,
                bottom: '84px',
                width: '56px',
                height: '56px',
                zIndex: 100,
            }}
            src={fulifafangSrc}
            alt=""
            onClick={this.goToFuliDetail}
        />

        const mangheIcon = <img
            // style={{
            //     position: 'fixed',
            //     right: '14px',
            //     bottom: '84px',
            //     width: '56px',
            //     height: '56px',
            //     zIndex: 100,
            // }}
            style={{
                position: 'absolute',
                left: window.innerWidth * 2 - 14 - 56,
                bottom: '84px',
                width: '56px',
                height: '56px',
                zIndex: 100,
            }}
            src={boxSrc}
            alt=""
            onClick={() => this.callGame('manghe')}
        />
        let hei = 220 + 43.5 + 60
        if (this.props.downloadShow) {
            hei += 60
        }
        return (
            <>
                {svgaLarge}
                {this.state.isNewUser && <NewUserGuide
                    endSteps={this.endGuide}
                />}
                <div
                    style={{height: '100%', zIndex: 100,}}
                    ref={el => this.ctnContent = el}
                >
                    {chooseModal}
                    {fuliModal}
                    {fuliResultModal}
                    <div
                        style={{
                            position: 'absolute',
                            width: '100%',
                            // zIndex: 100,
                        }}
                    >
                        {svgaHome}
                        {svgaAway}
                        <Votes
                            game={this.props.currentGame}
                            setVoted={this.setVoted}
                            voted={this.state.voted}
                            voteDetail={this.state.voteDetail}
                            voteResult={this.state.voteResult}
                            onVoteTeam={this.voteTeam}
                            votedNotice={this.state.votedNotice}
                            onVotedNoticeEnd={() => this.setState({votedNotice: false,})}
                            audience={this.state.audience}
                            svgaHome={svgaHome}
                            svgaAway={svgaAway}
                            fuli={this.state.fuli}
                            fuliLight={this.state.fuliLight}
                            fakeHeat={this.state.fakeHeat}
                            callVoteModal={() => this.onPopUp('vote')}
                        />
                    </div>


                    {gameOn && <DialogueContainer
                        dialogues={this.props.dialogues}
                        inputTouched={this.state.inputTouched}
                        together={true}
                        football
                    />}

                    <TogetherGiftPopup
                        visible={this.state.popUp.gift}
                        userDetail={userDetail}
                        onClose={this.onClose}
                        onSendGift={this.sendGift}
                        afterClose={() => this.checkWsErr()}
                    />

                    <ConsumePopup
                        userDetail={userDetail}
                        visible={this.state.popUp.consume}
                        onClose={this.onClose}
                    />

                    <GamePopup
                        visible={this.state.popUp.game}
                        onClose={this.onClose}
                    />

                    {(schedule || gameOn) && <ChatRoomFooter
                        onPopUp={this.onPopUp}
                        onInputFocus={this.onInputFocus}
                        onInputBlur={this.onInputBlur}
                        onChatInputChange={this.onChatInputChange}
                        onChatInputSubmit={this.onChatInputSubmit}
                        inputValue={this.state.msg}
                        inputDisabled={this.state.inputDisabled}
                        gameStatus={status}
                    />}

                </div>
                {giftNotice ? giftNoticesTemplate : null}
                {gameOn && fuliIcon}
                {gameEnd && fulifafangIcon}
                {gameNotStated && mangheIcon}
            </>

        )
    }

}


const mapStatesToProps = (state) => ({
    isLogin: state.global.isLogin,
    userDetail: state.user.userdetail,
    chat: state.chat,
    chatWs: state.chat.chatWs,
    users: state.chat.users,
    dialogues: state.chat.dialogues,
    gifts: state.chat.gifts,
    liveDetail: state.live.liveDetail,
    currentGame: state.game.currentGame,
    chatRoomToken: state.game.chatRoomToken,
    connected: state.chat.connected,
})

const mapDispatchToProps = (dispatch) => ({
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
    doGetGameRoomChatToken: (payload) => dispatch.game.doGetGameRoomChatToken(payload),
    onConnectWs: (payload) => dispatch.chat.onConnectWs(payload),
    onChatWsClose: (payload) => dispatch.chat.onChatWsClose(payload),
    doEmptyWsErr: () => dispatch.chat.doEmptyWsErr(),
    doGetChatExp: () => dispatch.exp.doGetChatExp(),
    doGetChatToken: (payload) => dispatch.chat.doGetChatToken(payload),
})

export default connect(
    mapStatesToProps,
    mapDispatchToProps,
)(withRouter(withDownload(Together)))




